<template>
    <div class="input-daterange input-group" :id="id" :class="[myClass]">
        <input type="text" class="input-sm form-control" :value="sd" :name="sname" />
        <span class="input-group-addon">至</span>
        <input type="text" class="input-sm form-control" :value="ed" :name="ename" />
    </div>
</template>

<script>
    import '../vendor/datepicker/bootstrap-datepicker.js'
    import '../vendor/datepicker/bootstrap-datepicker.zh-CN.min.js'

    export default {
        name: 'DatePickerRange',
        data() {
            return {
                id:'dpr-'+Math.random().toString().split('.')[1],
                sd:'',
                ed:''
            }
        },
        props:{
            value:{
                type:Object,
                default:{
                    sd:'',
                    ed:''
                }
            },
            myClass:{
                type:String,
                default:''
            },
            sname:{
                type:String,
                default:'start-date'
            },
            ename:{
                type:String,
                default:'end-date'
            },
            endDate:{
                type:String,
                default:'0d'
            },
            format:{
                type:String,
                default:'yyyy-mm-dd'
            }
        },
        watch:{
            value:{
                deep:true,
                handler(v,ov){
                    var self = this;
                    self.sd = v.sd;
                    self.ed = v.ed;
                }
            }
        },
        methods: {

        },
        mounted() {
            var self = this;
            $('#'+self.id).datepicker({
                format:self.format,
                endDate:self.endDate,
                autoclose:true,
                language:'zh-CN'
            }).on('hide',function(e){
                var sd = $(self.$el).find('[name='+self.sname+']').val();
                var ed = $(self.$el).find('[name='+self.ename+']').val();
                self.$emit('input',{sd,ed});
            });
        }
    }
</script>

<style scoped>

</style>